.b_BoardofDirectors{
    overflow: hidden;
}



/*Intro*/
.b_BoardofDirectors .intro{
    max-width:768px;
    margin-bottom:45px;
    display:grid;
    gap:20px;
}
@media (width >= 1000px) {
    .b_BoardofDirectors .intro{
        margin-bottom:110px;
    }
}
.b_BoardofDirectors .intro .h5{
    margin-bottom:20px;
}


/* Member */
.b_BoardofDirectors .member{
    cursor:pointer;
    position: relative;
    text-align:center;
    padding:32px;
}
@media (width >= 600px){
    .b_BoardofDirectors .member{
        text-align:left;
    }
}


/* Hover effect */
.b_BoardofDirectors .member:hover > .pic{
    background-color:var(--color_honey_glow);
    .body_text_large{
        text-decoration: underline;
    }
}
.b_BoardofDirectors .member:hover > a svg {
    color: var(--color_deep_ocean);
}
.b_BoardofDirectors .member dialog a:hover svg {
    color: var(--color_deep_ocean);
}




/*Profile Pic*/
.b_BoardofDirectors .pic{
    width: 192px;
    height: 192px;
    position:relative;
    border-radius: 999px;
    overflow: hidden;
    display: grid;
    margin-bottom:10px;
    margin-inline:auto;
    place-items: center;
    background-color:var(--color_warm_horizon);
    transition: background-color 0.3s;
}
.b_BoardofDirectors .text{
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}
.b_BoardofDirectors .position{
    font-weight:700;
}
.b_BoardofDirectors a svg {
    color: var(--color_warm_horizon);
    width:50px;
    height:50px;
}
@media (width >= 600px){
    .b_BoardofDirectors .pic {
        margin-inline:0 auto;
    }
}




/*GRID*/
.b_BoardofDirectors .col_4 {
    display: grid;
    gap: 40px 0;
    grid-template-columns: 1fr;
}
@media (width >= 600px){
    .b_BoardofDirectors .col_4 {
        grid-template-columns: 1fr 1fr;
        gap: 40px 0;
    }
}
@media (width >= 1200px){
    .b_BoardofDirectors .col_4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 50px 0;
    }
}




/* POPUP */
.b_BoardofDirectors dialog{
    position: absolute;
    top: 0;
    z-index: 1;
    background: var(--color_honey_glow);
    border: 0;
    border-radius: 30px;
    padding: 52px 32px;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -20px;
    margin-left: 0px;
    overflow: hidden;
    box-shadow: 8px 8px 11px 0 rgb(0 0 0 / 15%);

    /* set small so we can animate size */
    width: 260px;
    height: 260px;
    /* width: 100%;
    max-width: 418px; */
    transition: width 0.25s, height 0.25s;
    /* transition-delay: 0.2s; */
}
@media (width >= 600px){
    .b_BoardofDirectors dialog{
        /* width:418px; */
        left: 0;
        transform: unset;
    }
}
.b_BoardofDirectors dialog[open]{
    /* width: 430px;
    height: 680px; */
}
.b_BoardofDirectors dialog [value=close]{
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 10px;
    border:0;
}
.b_BoardofDirectors dialog [value=close]:hover{
    background: transparent;
}